<template>
	<view class="container">
		<u-navbar title="课程购买" is-fixed background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat"></u-navbar>
		<view class="userInfo">
			课程提醒发送至
			<view class="mobile">
				{{userInfo.mobile}}
			</view>
			<u-checkbox class='checkbox' @change="checkboxChange" v-model="checkbox" :name="checkboxName" size='20'
				label-size='20' active-color='#FE5477'>
				{{checkboxName}}
			</u-checkbox>
		</view>
		<view class="productInfo" style="margin: 40rpx 30rpx;">
			<image class="img" :src="videoInfo.image" mode="scaleToFill"></image>
			<view class="right-box">
				<view class="mobile">
					{{videoInfo.name}}
				</view>
				<view class="price">
					{{videoInfo.money}} 兑换券
				</view>
			</view>

		</view>
		<view class="pay">
			<view class="real-pay">
				实际支付：<text style="font-weight: 600;color: #FE5477; font-size: 26rpx;">{{videoInfo.money}} 兑换券</text>
			</view>
			<view class="pay-button" @click="toPay">
				立即兑换
			</view>
		</view>
		<u-modal v-model="messageShow" content="是否订阅兑换券变动和课程兑换成功通知？" @confirm='messageConfirm' show-cancel-button></u-modal>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import {
		requestSubscribeMessage
	} from '@/mixin/RSMessage.js'
	
	export default {
		mixins: [requestSubscribeMessage],
		data() {
			return {
				messageShow:false,
				baseUrl: this.$u.http.config.baseUrl,
				checkboxName: "允许将手机号授权给机构以提供教学服务，不勾选不会授权",
				checkbox: true,
				userInfo: uni.getStorageSync('userinfo'),
				productInfo: {},
				videoInfo: {},
				pageType:'buyClassSuccess',
			}
		},
		onLoad(option) {
			console.log(option)
			this.videoInfo = option
			this.getOrderData(option.id)
			this.getMessageStatus()
		},
		computed: {
			// ...mapGetters(['userInfo'])
		},
		methods: {
			getOrderData(id) {
				this.$u.api.submitOrder({
					product_id: id
				}).then(res => {
					this.productInfo = res.data
				})
			},
			checkboxChange(e) {
				this.checkbox = e.value
			},
			async toPay() {
				
				uni.showLoading({
					title:'支付中'
				})
				
				
				let res = await this.$u.api.pay({
					id: this.productInfo.id,
					mobile: this.userInfo.mobile,
					subscribe: this.checkbox ? 1 : 0
				})
				uni.hideLoading()
				if (res.code === 1) {
					uni.showToast({
						title: res.msg,
						icon: "success",
						duration: 2000,
						success() {
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},2000)
						}
					})
				}else {
					uni.showToast({
						title: res.msg,
						icon:'none',
						duration: 2000,
						success() {
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							},2000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
	}

	.userInfo {
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
		min-height: 100rpx;
		margin: 30rpx;
		border-radius: 10rpx;
		padding: 30rpx;

		.mobile {
			font-size: 38rpx;
			font-weight: 700;
		}

		.price {
			color: #FE5477;
		}
	}

	.productInfo {
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
		min-height: 100rpx;
		margin: 30rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		display: flex;

		.img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 20rpx;
		}

		.right-box {
			margin-left: 20rpx;
			width: 500rpx;

			.mobile {
				font-size: 32rpx;
				font-weight: 700;
			}

			.price {
				color: #FE5477;
			}
		}


	}

	.pay {
		position: fixed;
		bottom: 0;
		height: 140rpx;
		width: 100%;
		border-top: 1rpx solid #CCC;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.real-pay {
			font-size: 18rpx;
		}

		.pay-button {
			font-size: 26rpx;
			height: 100rpx;
			margin: 40rpx 0;
			background: #FE5477;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			width: 400rpx;
			border-radius: 50rpx;
		}
	}
</style>
